<template>
    <div  class="pdf-preview">
      <div ref="pdf"/>
    </div>
</template>
<script>
import pdfjs from '@bundled-es-modules/pdfjs-dist/build/pdf';
// import viewer from '@bundled-es-modules/pdfjs-dist/web/pdf_viewer';
import worker from '@bundled-es-modules/pdfjs-dist/build/pdf.worker.js?url'

pdfjs.GlobalWorkerOptions.workerSrc = worker

export default {
  name:'HbPdfPreview',
  props:{
    url:{
      type:String,
      default:''
    }
  },  
  data(){

    return {
      metaData:''
    }
  },
  watch:{
    url:{
      immediate:true,
      handler(){
        this.loadPdf()
      }
    }
  },    
  methods:{
    async loadPdf(){
      this.$nextTick(()=>{
        this.init()
      })
    },
    init(){
      const self = this
      // 创建实例，加载文件
      const loadingTask = pdfjs.getDocument(this.url);
      const container = this.$refs.pdf
      // 通过promise读取
      loadingTask.promise
        .then(function (doc) {
          const numPages = doc.numPages;
          console.info('# Document Loaded');
          console.info('page num',numPages)

          // meta 数据信息
          doc.getMetadata().then(function (data) {
            console.log('# Metadata Is Loaded');
            self.metaData+=`<p>${JSON.stringify(data.info, null, 2)}</p>`
            if (data.metadata) {
              self.metaData+=`<p>${JSON.stringify(data.metadata.getAll(), null, 2)}</p>`
            }
          });
          const loadPage = function (pageNum) {
            doc.getPage(pageNum).then(function (page) {
              const scale = 1.5;
              const viewport = page.getViewport({scale,});
              // Support HiDPI-screens.
              const outputScale = window.devicePixelRatio || 1;
 
              const canvas = document.createElement('canvas');
              const context = canvas.getContext('2d');
              container.appendChild(canvas);
              canvas.width = Math.floor(viewport.width * outputScale);
              canvas.height = Math.floor(viewport.height * outputScale);
              canvas.style.width = Math.floor(viewport.width) + 'px';
              canvas.style.height = Math.floor(viewport.height) + 'px';
 
              const transform = outputScale !== 1
                ? [outputScale, 0, 0, outputScale, 0, 0]
                : null;
 
              const renderContext = {
                canvasContext: context,
                transform,
                viewport
              };
              page.render(renderContext);
            });
          }
          // Loading of the first page will wait on metadata and subsequent loadings
          // will wait on the previous pages.
          for (let i = 1; i <= numPages; i++) {
            // lastPromise = lastPromise.then(loadPage.bind(null, i));
            loadPage(i)
          }
        })
      
    }
  }
}
</script>
